<template>
  <view class="viewport">
    <scroll-view
      class="scroll-view"
      :refresher-triggered="refreshing"
      scroll-y="true"
      lower-threshold="20"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh"
    >
      <view class="warp">
        <view class="title">
          <fui-section
            title="处理进度"
            fontWeight="600"
            descrSize="28"
            color="#333"
            lineWidth="4px"
            isLine
          ></fui-section>
        </view>
        <view class="conter_box">
          <view class="xian_warp">
            <view class="xian">
              <view
                v-for="(item, index) in recordList"
                :key="index"
                class="step-item"
              >
                <view
                  class="dian"
                  :class="{ 'current-step': index === recordList.length - 1 }"
                >
                  <view class="inner-dot"></view>
                </view>
                <view
                  class="active"
                  v-if="index !== recordList.length - 1"
                ></view>
              </view>
            </view>
          </view>

          <view class="port">
            <view class="xian"></view>
            <view
              class="li"
              v-for="(item, index) in recordList"
              :key="index"
              :class="{ 'current-item': index === recordList.length - 1 }"
            >
              <view class="top">
                <view class="top_title">{{ item.repairStage }}</view>
                <view class="time">{{ item.handlingTime }}</view>
              </view>
              <view class="content">
                <view class="info-row">
                  <text class="label">处理部门：</text>
                  <text class="value">{{ item.deptName }}</text>
                </view>
                <view class="info-row">
                  <text class="label">处理人员：</text>
                  <text class="value">{{ item.handlerName }}</text>
                </view>
                <view class="info-row" v-if="item.handlingContent">
                  <text class="label">处理内容：</text>
                  <text class="value">{{ item.handlingContent }}</text>
                </view>
                <view class="info-row" v-if="item.handlingResult">
                  <text class="label">处理结果：</text>
                  <text class="value">{{ item.handlingResult }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, watch } from "vue";
import { getRepairRecordList } from "@/pages/api/subpkg_index/dispatching.js";

const props = defineProps({
  detail: {
    type: Object,
    default: () => null,
  },
});

const refreshing = ref(false);
const recordList = ref([]);

// 获取维修记录列表
const getRecordList = async () => {
  if (!props.detail?.id) return;
  try {
    const res = await getRepairRecordList(props.detail.id);
    if (res.code === 200) {
      recordList.value = res.data.records;
    }
  } catch (error) {
    console.error("获取维修记录失败", error);
  }
};

// 监听detail变化
watch(
  () => props.detail,
  (newVal) => {
    if (newVal) {
      getRecordList();
    }
  },
  { immediate: true }
);

const onScrollToLower = () => {};
const onRefresh = () => {};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  background-color: #f5f5f5;
}
.viewport {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  height: 100%;
}
.warp {
  background-color: #fff;
  padding: 20rpx 0;
  .title {
    display: flex;
    align-items: center;
    height: 80rpx;
    border-bottom: 1px solid #eee;
    padding: 0 30rpx;
  }
  .conter_box {
    display: flex;
    padding: 20rpx 0;
    .xian_warp {
      width: 120rpx;
      padding-top: 45rpx;
      .xian {
        display: flex;
        flex-direction: column;
        align-items: center;

        .step-item {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .dian {
          width: 32rpx;
          height: 32rpx;
          background-color: #e8f3ff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2rpx solid #0052d9;

          .inner-dot {
            width: 16rpx;
            height: 16rpx;
            background-color: #0052d9;
            border-radius: 50%;
          }

          &.current-step {
            background-color: #0052d9;
            .inner-dot {
              background-color: #fff;
            }
          }
        }
        .active {
          height: 160rpx;
          width: 2rpx;
          background-color: #0052d9;
          margin: 8rpx 0;
        }
      }
    }
  }

  .port {
    flex: 1;
    padding-right: 30rpx;
    .li {
      padding: 20rpx 0;

      &.current-item {
        .top_title {
          color: #0052d9;
          font-weight: bold;
        }
      }

      .top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16rpx;

        .top_title {
          font-size: 32rpx;
          color: #333;
        }

        .time {
          font-size: 24rpx;
          color: #999;
        }
      }

      .content {
        background-color: #f8f8f8;
        border-radius: 12rpx;
        padding: 20rpx;

        .info-row {
          display: flex;
          margin-bottom: 12rpx;
          font-size: 28rpx;
          line-height: 1.5;

          &:last-child {
            margin-bottom: 0;
          }

          .label {
            color: #666;
            width: 140rpx;
            flex-shrink: 0;
          }

          .value {
            color: #333;
            flex: 1;
          }
        }
      }
    }
  }
}
</style>
